<template>
  <div class="off-website">
    <!--头部-->
    <div class="header">
      <div class="header-content">
        <div class="logo-name">
          <div class="logo">
            <img
              src="../assets/swlogo.png"
              alt=""
            />
          </div>

        </div>
        <div class="system-name">
          <span style="display: block;margin-top: 20px">桑万人工智能</span>
          <span style="display: block;margin-left: -35px">Sunvan AI</span>
        </div>

        <div class="menu">
          <ul class="menu-list">
            <li
              v-for="(item, index) in ['首页', '产品中心']"
              :key="index"
              :class="{ 'handle-li': index == menuCurrentIndex }"
              @click="handleMenu(index)"
            >
              {{ item }}
            </li>
          </ul>
        </div>

        <div class="login-register">
          <span @click="dialogFormVisible = true">用户中心</span>
        </div>
      </div>
    </div>

    <!--内容-->
    <div class="container">
      <!-- 栏 -->
      <div class="content">
        <ul class="ul-list" v-for="(item, index) in otherList" :key="index">
          <li class="li-list">
            <div class="li-span">{{ item.label }}</div>
            <div
              class="container-list"
              v-for="(childItem, childIndex) in item.children"
              :key="childIndex"
            >
              <span>{{ childItem.label }}</span>
            </div>
          </li>
        </ul>
      </div>

      <!-- 公司介绍 -->
      <div class="introduce">
        <div class="intro-name">公司介绍</div>
        <div class="detail-info">
          <p class="p-info">
            桑万AI是一家基于深度学习和计算机视觉技术提供场景化应用解决方案的AI科技公司。基于自主开发的深度学习平台，不断研发出领先的机器视觉技术，为多个行业量身定制智能解决方案，驱动行业实现跨越式智能升级。 依托长期持续的科研投入和经验丰富的技术人才队伍，实现了自身科技成果的产业化应用。
          </p>
          <p class="p-info">
            我们的核心技术包括：身份证OCR识别技术、银行卡OCR识别技术、发票票据识别技术、车架号（VIN码）识别技术、行驶证OCR识别技术、驾驶证OCR识别技术、车辆合格证识别技术、机动车销售统一发票识别技术、保单识别技术、财务报表识别技术、通用文字识别技术、手写体识别技术、表格识别技术、无边框表格识别技术、文档影像技术、自定义模板的光学字符识别软件、阅读理解技术的全文本电子化软件等。
          </p>
          <p class="p-info">
            桑万AI拥有一支一流大学博士团队，确保在技术上的领先性和前瞻性，努力实现“中国领先的计算机视觉应用解决方案技术服务提供商”的愿景。
          </p>
<!--          <p class="p-info">
            解决非扫描文件的文字打印错位、倾斜文字的识别问题；
          </p>-->
        </div>
      </div>

      <!--合作伙伴-->
      <div class="cooper-friend">
        <div class="friend-name">合作伙伴</div>
        <div class="friend-list">
          <div class="list"  :key="index">
            <img src="../assets/pig.png" alt="" />
            <span>飞猪</span>
          </div>
          <div class="list">
            <img src="../assets/hailong.png" alt="" style="width: auto;height: auto"/>
            <span>海隆</span>
          </div>
          <div class="list">
            <img src="../assets/libao.png"/>
            <span>利宝保险</span>
          </div>
          <div class="list">
            <img src="../assets/renju.png"/>
            <span>仁聚保险</span>
          </div>
        </div>
      </div>
      <div class="cooper-friend">
        <div class="friend-list">


          <div class="list">
            <img src="../assets/shangqi.png" style="width: 60%;height: 60%"/>
            <span>上汽大通</span>
          </div>
          <div class="list">
            <img src="../assets/yzj.png" alt="" style="width: auto;height:auto">
            <span>雅智捷</span>
          </div>
        </div>
      </div>
    </div>

    <!--商务合作-->
    <div class="busin-cooper-wrapper">
      <div class="busin-cooper">
        <div class="busin-name">
          <span>商务合作</span>
        </div>
        <div class="detail">
          <p class="details-info">
            <span>电话：</span>
            <span>15811442619</span>
          </p>
          <p class="details-info">
            <span>邮箱：</span>
            <span>Business@sunvanai.com</span>
          </p>
          <p class="details-info">
            <span>地址：</span>
            <span>上海市浦东新区金吉路778号2号楼601室 </span>
          </p>
        </div>
      </div>
    </div>

    <!--微信服务号-->
    <div class="wc-service-no">
      <div class="wc-name">
        <span>微信小程序</span>
      </div>
      <div class="wc-qr-code">
        <img
          src="../assets/weChat.jpg"
          alt=""
        />
      </div>
    </div>

    <!--底部详情-->
    <div class="footer-detail">
      <div class="detail">
        <div class="details-info">
<!--          <span>如果您对于本文内容有任何问题或建议，请告诉我们。</span>
          <span class="submit-feedback">提交反馈</span>
          <span class="user-agreement">用户协议</span>-->
        </div>
        <div class="details-info">
          <span>版权所有 © 桑万（上海）人工智能科技有限公司 未经许可不得复制、转载或摘编，违者必究！</span><br>
          <a class="record-no">沪ICP备 2021011822号-1</a>
        </div>
      </div>
    </div>

  <!--弹框-->
    <div>
      <el-dialog title="登录" :visible.sync="dialogFormVisible" width="30%">
        <el-row :gutter="20">
          <el-col :span="6" >手机号:</el-col>
          <el-col :span="6">
            <el-input v-model="phone" style="width: 250%"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">验证码:</el-col>
          <el-col :span="6"><el-input style="width: 120%" v-model="phoneCode"></el-input></el-col>
          <el-col :span="8"><el-button size="small" @click="getCodeByPhone" v-show="show">获取验证码</el-button>
            <span v-show="!show" class="count" style="width: 100px;border: #3a8ee6 1px solid;display: block;height: 30px;padding-top:5px">{{count}} s</span>
          </el-col>
        </el-row>
        <el-row>
        </el-row>
        <div slot="footer" class="dialog-footer" style="margin-left: 30px">
          <el-button type="primary" @click="login">登录</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {getCode,login} from "../api/api";

export default {
  data() {
    return {
      index: 0,
      show: true,
      count:0,
      timer:null,
      dialogFormVisible: false,
      phone:"",
      phoneCode:"",
      menuCurrentIndex: 0,
      otherList: [
        {
          label: "人脸识别",
          children: [
            { label: "人脸比对" },
            { label: "人证比对" },
            { label: "动作活体检测" },
            {label: "静默活体检测"}
          ],
        },
        {
          label: "卡片识别",
          children: [
            { label: "身份证" },
            { label: "行驶证" },
            { label: "驾驶证" },
            {label: "银行卡"},
            {label: "车辆合格证"},
            {label: "车架号(VIN)"}
          ],
        },
        {
          label: "票据识别",
          children: [
            { label: "增值税发票" },
            {label: "机动车销售统一发票"},
            {label: "保单识别"}
            ],
        },
        {
          label: "通用文本识别",
          children: [
            { label: "通用文本" },
            { label: "通用表格" },
            { label: "无边框表格" },
            {label: "财务报表识别"},
            {label: "手写体识别"}
          ],
        },
      ],
      friendList: [
        {
          img: "../assets/pig.png",
          label: "飞猪",
        },
        {
          img: "https://www.shargoodata.com/static/img/u34.a6fdaf9.png",
          label: "云享",
        },
        {
          img: "https://www.shargoodata.com/static/img/u36.44cbfbf.png",
          label: "会务家",
        },
      ],
    };
  },
  methods: {
    /**点击菜单 */
    handleMenu(index) {
      this.menuCurrentIndex = index;
    },
    async getCodeByPhone(){
      const req = /^[1][3,4,5,7,8][0-9]{9}$/;
      const TIME_COUNT = 60;
      if (req.test(this.phone)) {
        let param = {phone: this.phone}
        await getCode(param);
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      }else {
        alert("请输入有效的手机号")
      }

    },
    async login(){
      let param = {
        phone: this.phone,
        code: this.phoneCode
      }
      var newVar = await login(param);
      if (newVar.code === 200) {
        window.location.href="http://www.sunvanai.com:8081/login";
      }else {
        alert("验证码不正确")
      }
    }
  },
};
</script>

<style lang="scss" scoped>
@mixin fontStyle {
  font-weight: 700;
  font-size: 25px;
  color: #003;
  font-weight: 700px;
  font-family: "\5B8B\4F53 Bold", "\5B8B\4F53 \5E38\89C4", "\5B8B\4F53";
}
.off-website {
  background-color: #fff;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  .header {
    color: #fff;
    height: 90px;
    background-color: #333;
    .header-content {
      width: 1092px;
      height: inherit;
      margin: 0 auto;
      display: flex;
      .logo-name {
        flex: 1;
        display: flex;
        align-items: center;
        div {
          margin: 0 10px;
        }
        .logo {
          img {
            height: 80%;
            width: 80%;
          }
        }
      }

      .menu {
        flex: 3;
        height: inherit;
        margin-left: 20px;
        .menu-list {
          list-style: none;
          height: 90px;
          display: flex;
          li {
            padding: 0 20px;
            font-size: 18px;
            color: #fff;
            line-height: 50px;
            margin-right: 30px;
          }
          /*li:hover {
            background: #5f0918;
          }*/
          .handle-li {
            color: #ff6666;
            border-bottom: 0px solid #3e8e04;
          }
        }
      }

      .login-register {
        flex: 1;
        height: inherit;
        text-align: center;
        span {
          font-size: 18px;
          line-height: 90px;
          padding: 12px 20px;
          cursor: pointer;
        }
      }
    }
  }

  .container {
    width: 1092px;
    margin: 45px auto 0;
    // position: relative;
    // top: 45px;

    .content {
      display: flex;
      box-sizing: border-box;
      .ul-list {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;

        .li-list:first-child {
          width: 100%;
          .li-span {
            width: 80%;
            display: block;
            height: 36px;
            background-color: #ff6666;
            color: #fff;
            border-radius: 4px;
            text-align: center;
            line-height: 36px;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 20px;
          }

          .container-list {
            width: 80%;
            text-align: center;
            line-height: 36px;
            color: #6b6b6b;
            font-family: "\5B8B\4F53 \5E38\89C4", "\5B8B\4F53";
            font-size: 14px;
          }
        }
      }
    }

    .introduce {
      width: 1092px;
      margin-top: 60px;
      .intro-name {
        @include fontStyle;
      }

      .detail-info {
        margin-top: 30px;
        .p-info {
          margin-bottom: 16px;
          font-style: normal;
          font-size: 14px;
          font-family: Arial Normal, Arial;
          text-align: left;
          text-indent: 35px;
        }
      }
    }

    .cooper-friend {
      width: 1092px;
      margin: 60px auto 0;
      .friend-name {
        @include fontStyle;
      }

      .friend-list {
        width: 1092px;
        display: flex;
        img {
          width: 50%;
          height: 50%;
        }
        .list {
          display: flex;
          flex-direction: column;
          margin: 20px 30px;
          align-items: center;
          span {
            display: block;
            margin-top: 10px;
            font-family: Arial Normal, Arial;
            font-size: 28px;
          }
        }
      }
    }
  }
  .busin-cooper-wrapper {
    height: 170px;
    width: 100%;
    background-color: #c9c9c9;
    .busin-cooper {
      width: 1092px;
      margin: 60px auto 0;
      .busin-name {
        @include fontStyle;
        box-sizing: border-box;
        padding: 24px 0 12px;
      }

      .detail {
        .details-info {
          margin-bottom: 12px;
        }
      }
    }
  }

  .wc-service-no {
    width: 1092px;
    margin: 60px auto 0;
    .wc-name {
      @include fontStyle;
    }
    .wc-qr-code {
      margin-top: 20px;
      img {
        width: 170px;
        height: 170px;
      }
    }
  }

  .footer-detail {
    width: 100%;
    height: 170px;
    background-color: #c9c9c9;
    margin-top: 60px;
    .detail {
      width: 1092px;
      margin: 0 auto;
      .details-info {
        padding: 20px 0;
        .submit-feedback,
        .user-agreement {
          color: #fff000;
          cursor: pointer;
        }

        .record-no {
          cursor: pointer;
          color: #0000ee;
          text-decoration: underline;
        }
        span {
          padding-right: 10px;
        }
      }
    }
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>